<template>
  <div class="index">
    <div id="player" class="subScreen"></div>
    <div id="wrap" class="chatroom"></div>
    <div id="ppt" class="mainScreen"></div>

    <template v-if="$data.interactInit">
      <!-- 公告 -->
      <AnnouncementDom/>
      <Questionnaire />
    </template>
  </div>
</template>

<script setup>
  import { onMounted, onUnmounted, getCurrentInstance, ref,reactive,toRefs, inject } from 'vue';
  import { updateConfig } from '@polyv/interactions-receive-sdk' // 初始化加载互动模块
  import AnnouncementDom from '../components/AnnouncementDom.vue'   // 公告
  import Questionnaire from '../components/Questionnaire.vue'   // 问卷
  import { useMainStore } from '@/store/config'

  const $data = reactive({
    interactInit: false, // 用来加载互动SDK组件时机问题，因为互动组件加载前必须初始化互动SDK配置
    channelData: null, // 建立直播成功后的数据回调
  })
  onMounted(async () => {
    const $store = useMainStore();
    const utils = inject('$utils')
    let ChatInfo = await utils.getChatInfo()

    const chatroom = new PolyvChatRoom({
        roomId: $store.channelId,
        userId: $store.userId,
        nick: $store.userName,
        pic: $store.userPic,
        token: ChatInfo.data.token,
        mediaChannelKey: ChatInfo.data.mediaChannelKey,
        version: "2.0",
        container: "#wrap",
        width: 300,
        height: 600,
        userType: "slice",
        roomMessage: function (data) {
          // data为聊天室socket消息，当有聊天室消息时会触发此方法
          //console.log(data);
        },
    });

    const sign = utils.getSign($store.appSecret, {
      appId: $store.appId,
      channelId: $store.channelId,
      timestamp: $store.timestamp
    });
    const liveSdk = new PolyvLiveSdk({
      channelId: $store.channelId,
      sign: sign, // 频道验证签名
      timestamp: $store.timestamp, // 毫秒级时间戳
      appId: $store.appId, // polyv 后台的appId
      socket: chatroom.chat.socket,
      user: {
        userId: $store.userId,
        userName: $store.userName,
        pic: $store.userPic,
      },
    })
    // 监听频道信息并初始化播放器
    liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
      console.warn('---频道信息---', data)
      $data.channelData = data
        //第三步：设置直播播放器
        liveSdk.setupPlayer({
          pptEl: "#ppt",
          el: "#player",
          type: "auto",
          controllerPosition: "player",
          pptNavBottom: "80px",
          autoplay: true,
          lowLatency: true // 必须添加该参数
        });
        loadInteractionsReceive() // 加载互动模块
        $data.interactInit = true // 加载互动UI组件
    });
    liveSdk.on(PolyvLiveSdk.EVENTS.STREAM_UPDATE, function (event,status) {
      console.log('流状态更新', status);
      liveSdk.reloadPlayer();// 刷新播放器
    });

    const loadInteractionsReceive = () => {
      // 初始化互动模块
      const userInfo = {
        // 昵称
        nick: $store.userName,
        // 头像
        pic: $store.userPic,
        // 观众id
        userId: $store.userId
      }
      const channelInfo = {
        // 频道号
        channelId: $store.channelId,
        // 房间号
        roomId: $store.channelId,
        // 频道场次id
        sessionId: $data.channelData.sessionId
      }
      updateConfig({
        // 观众信息
        userInfo: userInfo,
        // 频道信息
        channelInfo: channelInfo,
        // 此处传入 socketio 实例
        socket: liveSdk.socket,
        // viewerApiToken 更新函数
        getViewerApiToken: async (callback) => {
          console.log(11)
          const viewerApiToken = await utils.myViewerApiTokenGetter().data.data.token
          callback({ viewerApiToken })
        }
      })
    }
  })
</script>

<style scoped>.mainScreen {
  position: absolute;
  top: 10px;
  left: 310px;
  width: 400px;
  height: 500px;
}

.subScreen {
  width: 300px;
  height: 300px;
}

.chatroom {
  width: 300px;
  height: 500px;
}
</style>
